import React, { useMemo } from 'react'
import { View, Text, Image } from '@tarojs/components'
import i18n from '@I18N'
import { PainLogITF } from '@INTERFACES/PainLog'
import { TRENDS_IMAGE_MAP } from '@CONSTANTS/painLog'
import Images from '@ASSET/Images'
import style from './PainSituationsCard.module.scss'

interface Props {
  todayPainLog: PainLogITF | null;
}
const PainSituationsCard: React.FC<Props> = ({
  todayPainLog
}) => {
  const { TotalTime, OverallRating, Frequency, EmptyData = true, FrequencyChange = '',
    OverallRatingChange = '', TotalTimeChange = '' } = todayPainLog || {}
  const data = useMemo(() => [
    { title: i18n.patient.intensity(),
      value: EmptyData ? '-' : `${OverallRating}`,
      unit: '级',
      image: TRENDS_IMAGE_MAP[OverallRatingChange] || Images.dataCenter.icon_trend_none },
    { title: i18n.patient.frequency_tab(),
      value: EmptyData ? '-' : `${Frequency}`,
      unit: '次',
      image: TRENDS_IMAGE_MAP[FrequencyChange] || Images.dataCenter.icon_trend_none },
    { title: i18n.patient.duration(),
      value: EmptyData ? '-' : TotalTime?.toFixed(1) || 0,
      unit: '小时',
      image: TRENDS_IMAGE_MAP[TotalTimeChange] || Images.dataCenter.icon_trend_none }
  ], [EmptyData, Frequency, FrequencyChange, OverallRating, OverallRatingChange, TotalTime, TotalTimeChange])

  return (
    <View className={style.container}>
      {data.map((item, index) => {
        const { title, value, unit, image } = item
        return (
          <View className={style.itemContainer} key={title + value}>
            <View className={style.titleContainer}>
              <Text className={style.title}>{title}</Text>
              <View className={style.line} />
            </View>
            <View className={style.valueContainer}>
              <Text className={style.valueText}>{`${value}`}</Text>
              <Text className={style.unitText}>{unit}</Text>
            </View>
            <View className={style.trendContainer}>
              {EmptyData ? <Text className={style.noData}>暂无数据</Text> : (
                <>
                  <Text className={style.trendText}>较昨日</Text>
                  <Image src={image} className={style.trendIcon} />
                </>
              )}
            </View>
          </View>
        )
      })}
    </View>
  )
}

export default PainSituationsCard

